<template>
	<view class="content">
		<!-- @click="goorder" -->
		<view class="tibvolo">
			<image @click="fanhiskan" class="dingbudefanhui"
				src="https://dfgq3654.laidianbanlv.cn/images/duanju/baisefanhui.png" mode=""></image>
		</view>


		<view class="personbox">
			<view class="personimg">
				<image @click="gologin" src="https://dfgq3654.laidianbanlv.cn/images/duanju/wubiaoqinbg.png" mode="">
				</image>
			</view>
			<view v-if="!usertoken" @click="gologin" class="personhanzidenglu">
				请登录
			</view>
			<view v-if="usertoken" class="personhanzi">
				<view class="yonghumiz" v-if="useinfgo.info">{{useinfgo.info.mobile}}</view>
				<view class="yonghiid" v-if="useinfgo.info">用户id:{{useinfgo.info.number}}</view>

			</view>



			<!-- <view class="wwkefu">
				<image src="https://dfgq3654.laidianbanlv.cn/images/duanju/lansekeuf.png" mode=""></image>
			</view> -->

		</view>

		<view v-if="useinfgo.banner" class="seipBox">
			<!-- <u-swiper indicator-pos="bottomLeft" :effect3d="!true" :list="useinfgo.banner"></u-swiper> -->
			<view class="seipBox">
				<swiper indicator-dots="true" autoplay="true" indicator-active-color="#7dd8b5" class="selebig">
					<swiper-item v-for="(item,index) in useinfgo.banner" :key="index">
						<img @click="dianjilunbop(item)" class="swipimg" :src="item.image" mode="scaleToFill" />
					</swiper-item>
				</swiper>
			</view>
		</view>


		<view v-if="useinfgo.history" class="lishikanbox">
			<view class="">
				<view class="lishkantitiel">
					<u-section @click="gokanlishiju" :show-line="false" title="历史观看" sub-title="查看更多"></u-section>
				</view>
				<view class="lishikangroup">

					<view v-for="(item, index) in useinfgo.history" :key="index" class="lihisimgbox">
						<view v-if="useinfgo.history.length!=0" class="remenju">
							<view @click="oanksnd(item)" class="rejubox">
								<view class="rejuimg">
									<image class="lishietu" :src="item.cover" mode=""></image>
								</view>
								<view class="rejunianme">
									{{ item.title.length > 6 ? item.title.substring(0, 6) + '..' : item.title }}
								</view>
							</view>
						</view>
					</view>

					<view v-if="useinfgo.history.length==0" class="meiyhjlishibox">
						<image src="https://dfgq3654.laidianbanlv.cn/images/duanju/meiyoujilv.png" alt="" />
						<view class="kanjubox">
							<view>没有观看历史,快去看剧吧~</view>
							<!-- <view>快去看剧吧~</view> -->
						</view>

					</view>
				</view>
			</view>

		</view>


		<u-popup border-radius="30" v-model="showtuichuliongfo" mode="center">
			<view class="tutichuloas">
				<view class="tuichutext">
					您确定退出登录吗？
				</view>
				<view class="popbvubttom">
					<view @click="showtuichuliongfo = false" class="quxiao">取消</view>
					<view @click="loginoutt" class="quedatichu">确定</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import request from '../../utils/request.js';
	import api from '../../utils/url.js';
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				phone: '',
				loginState: false,
				showtuichuliongfo: false,
				useinfgo: "",
				usertoken: "",
			}
		},
		computed: {
			...mapState({
				token: state => state.token,
			})
		},
		onLoad() {

		},
		onShow() {
			var that = this

			// console.log('token',token)
			this.usertoken = localStorage.getItem("token");
			if (this.usertoken == undefined || this.usertoken.length == 0 || this.usertoken.length == null) {

			} else {
				that.getwodeixni()
			}
			console.log('usertoken', this.usertoken)
		},
		methods: {
			getwodeixni() {
				let data = {

				}
				request(api.memberinfo, 'GET', data)
					.then(response => {
						console.log('memberinfo数据:', response.data);
						if (response.code == "200") {
							this.useinfgo = response.data
						} else if (response.code == "401") {
							localStorage.removeItem("token")
							uni.showToast({
								title: response.msg,
								icon: "none"
							})
						} else {
							uni.showToast({
								title: response.msg,
								icon: "none"
							})
						}
					})
					.catch(response => {
						uni.hideLoading()
					})
			},
			gokanlishiju() {
				var token = localStorage.getItem("token");
				if (token == undefined || token.length == 0 || token.length == null) {
					// uni.showToast({
					// 	title: "请登录",
					// 	icon: "none"
					// })
					setTimeout(() => {
						uni.navigateTo({
							url: "/jingqu/login/login?id=" + i.id
						})
					})

				} else {

					uni.navigateTo({
						url: "/jingqu/kanjulishi/kanjulishi"
					})
				}


			},
			oanksnd(i) {
				var token = localStorage.getItem("token");
				if (token == undefined || token.length == 0 || token.length == null) {
					// uni.showToast({
					// 	title: "请登录",
					// 	icon: "none"
					// })
					setTimeout(() => {
						uni.navigateTo({
							url: "/jingqu/login/login?id=" + i.id
						})
					})

				} else {
					uni.navigateTo({
						url: '/jingqu/kanju/kanju?id=' + i.id
						 // + '&id=item_id' + i.item_id
					});
				}
			},
			dianjilunbop(i) {
				console.log(i)
				var token = localStorage.getItem("token");
				console.log(token)
				// return false
				if (token == undefined || token.length == 0 || token.length == null) {
					// uni.showToast({
					// 	title: "请登录",
					// 	icon: "none"
					// })
					setTimeout(() => {
						uni.navigateTo({
							url: "/jingqu/login/login?id=" + i.id
						})
					})

				} else {
					uni.navigateTo({
						url: '/jingqu/kanju/kanju?id=' + i.play_list_id

					})
				}
			},
			fanhiskan(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			gologin() {
				uni.navigateTo({
					url: "/jingqu/login/login"
				})
			},

			loginoutt() {
				uni.removeStorageSync('token')
				this.loginState = false
				this.showtuichuliongfo = false

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F2F2;
	}

	.personbox {
		width: 90%;
		margin-left: 5%;
		height: 200rpx;
		// background-image: linear-gradient(#cdf9c0, #c6f9e4);
		display: flex;
		flex-flow: row;
		align-content: center;
		margin-top: -100rpx;
		background-color: #fff;
		border-radius: 20rpx;

	}

	.personimg {
		width: 22%;
		margin-left: 3%;
		margin-top: 30rpx;
	}

	.personimg image {
		width: 80rpx;
		height: 80rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}

	.personhanzi {
		width: 70%;
		// line-height: 200rpx;
		font-size: 28rpx;
		color: #000;
	}

	.personhanzidenglu {
		width: 70%;
		// line-height: 200rpx;
		font-size: 28rpx;
		color: #000;
		margin-top: 80rpx;
	}

	.yonghumiz {
		width: 100%;
		height: 40rpx;
		margin-top: 60rpx;
		// display: inline-block;
	}

	.yonghiid {
		width: 100%;
		height: 40rpx;
		color: #000;
		font-size: 24rpx;
		margin-top: 10rpx;
		// display: inline-block;
	}

	.myoderas {
		width: 94%;
		margin-left: 3%;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.odarfi {
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 20rpx;
		padding-top: 20rpx;
	}

	.ordegorip {
		width: 100%;
		display: flex;
		flex-flow: row;
		align-items: center;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		// margin-left: 3%;
	}

	.ordegorip image {
		width: 80rpx;
		height: 80rpx;
		display: block;
		margin: 0 auto;
	}

	#huanhquxi {
		width: 70rpx;
		height: 70rpx;
		display: block;
		margin: 0 auto;
		padding: 5rpx 0;
	}

	.odasfgtext {
		font-size: 24rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.orasinxdx {
		width: 20%;
	}

	.buyytox {
		width: 94%;
		margin-left: 3%;
		margin-top: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.tuihulogin {
		width: 100%;
		// margin-left: 3%;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;

		padding: 20rpx 0;
		border-bottom: 1px dashed #eee;
	}

	.tuihulogin image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 40rpx;
	}

	.tuihulogin view {
		margin-left: 40rpx;
	}

	.tutichuloas {
		width: 500rpx;
		height: 200rpx;
		border-radius: 30rpx;
	}

	.tuichutext {
		height: 200rpx;
		display: block;
		padding: 40rpx 0;
		// margin-top: 80rpx;
		// margin: 80rpx auto;
		font-weight: bold;
		font-size: 34rpx;
		text-align: center;
	}

	.popbvubttom {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 0;
	}

	.quxiao {
		width: 50%;
		color: white;
		background-color: #d0d0d0;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 0 0 0 30rpx;
	}

	.quedatichu {
		width: 50%;
		color: white;
		background-color: #ffdf69;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 0 0 30rpx 0;
	}

	#noborer {
		border-bottom: none;
	}

	.kaibpbox {
		width: 80%;
		margin-top: 40rpx;
		margin-left: 10%;
		height: 150rpx;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		// align-items: center;
		background-color: #cdf9c0;
		border-radius: 30rpx;
	}

	.kaigrpup {
		margin-left: 20rpx;
	}

	.kaititile {
		font-size: 32rpx;
		font-weight: bold;
		color: black;
		margin-top: 30rpx;
	}

	.kaitext {
		margin-top: 15rpx;
	}

	.kaitishi {
		display: block;
		// line-height: 150rpx;
		background-color: white;
		margin-right: 40rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-top: 40rpx;
		padding: 5rpx 20rpx;
		line-height: 50rpx;
	}

	.seipBox {
		width: 94%;
		margin-left: 3%;
		// padding: 10rpx 0;
		// background-color: #fff;
		margin-top: 40rpx;
	}

	.lishikanbox {
		width: 100%;
		margin-top: 40rpx;
	}

	.lishkantitiel {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.lishikangroup {
		width: 94%;
		margin-left: 3%;
		display: flex;
		flex-flow: row;
		justify-content: left;
		align-items: center;
	}

	.lihisimgbox {
		width: 33%;
		margin-top: 20rpx;
	}

	.meiyhjlishibox {
		width: 100%;
		// display: flex;
		// flex-flow: row;
		// justify-content: center;
		// align-items: center;
		margin-top: 80rpx;
	}

	.meiyhjlishibox image {
		width: 250rpx;
		height: 250rpx;
		margin: 0 auto;
		display: flex;
	}

	.kanjubox {
		margin-left: 40rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.lihisimgbox image {
		width: 210rpx;
		height: 300rpx;
	}

	.wwkefu image {
		margin-top: 60rpx;
		margin-right: 40rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.tibvolo {
		width: 100%;
		height: 200rpx;
		border-radius: 0 0 30rpx 30rpx;
		background-color: #5199FE;
	}

	.swipimg {
		width: 100%;
		height: 260rpx;
		border-radius: 30rpx;
	}

	.remenju {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
		margin-top: 20rpx;
	}

	.rejunianme {
		text-align: center;
	}

	.dingbudefanhui {
		width: 40rpx;
		height: 40rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
	}
	.lishietu{
		border-radius: 20rpx;
	}
</style>